<template>
	<view class="all-main">
		<u-sticky>
			<view class="menus">
				<view class="items" :class="active==1 ? 'active' : ''" @click="tags(1)">
					<text>活动列表</text>
				</view>
				<view class="items" :class="active==2 ? 'active' : ''" @click="tags(2)">
					<text>我的活动</text>
				</view>
			</view>
		</u-sticky>
		<view class="main">
			<view v-if="active == 1" class="lists">
				<view v-if="info && info.length > 0">
					<view v-for="(item, index) in info" :key="index" class="items">
						<view class="policy" @click="policy(item)">
							<text>政策配置</text>
						</view>
						<view class="images" @click="detail(item)">
							<u--image v-if="item.images" :src="item.images" width="100%" height="230" shape="square"
								radius="8"></u--image>
						</view>
						<view class="specification">
							<view class="lefts">
								<text>参与人数</text>
								<text class="nums">{{item.participation}}</text>
							</view>
							<view class="rights">
								<text>活动奖励</text>
								<text class="price">{{item.money}}</text>
								<text class="units">元</text>
							</view>
						</view>
						<view class="title" @click="detail(item)">
							<text>{{item.title}}</text>
						</view>
					</view>
				</view>
				<u-empty v-else mode="list" icon="/static/Empty/data_null.png">
				</u-empty>
			</view>
			<view v-else class="h-list">
				<view v-if="myList && myList.length > 0">
					<view v-for="(item, index) in myList" :key="index" class="h-item">
						<view class="h-item-top">
							<view class="h-item-top-left">
								<u--image v-if="item.activitys" :src="item.activitys.images" width="100" height="100"
									shape="square" radius="8"></u--image>
							</view>
							<view class="h-item-top-right">
								<view class="h-item-top-right-title">
									<text>{{item.activitys.title}}</text>
								</view>
								<view class="h-item-top-right-state">
									<view class="progress">
										<text class="one reds">{{item.standard_num}}</text>
										<text class="two">/</text>
										<text class="three greens">{{item.nums}}</text>
									</view>
									<view class="state">
										<text v-if="item.is_finish == 1" class="reds">未完成</text>
										<text v-else class="greens">已完成</text>
									</view>
								</view>
							</view>
						</view>
						<view v-if="upState" class="h-item-more" @click="upClick">
							<u-icon name="arrow-down" color="#c8c9cc" size="28"></u-icon>
						</view>
						<view v-if="downState" class="h-item-con">
							<view class="h-item-con-tag">
								<view class="h-item-con-tag-title">
									<text class="product">活动详情</text>
								</view>
								<view v-for="(items, indexs) in item.activityDetail" :key="indexs"
									class="h-item-con-tag-list">
									<view class="h-item-con-tag-list-day">
										<view class="h-item-con-tag-list-day-l">
											<text class="one">{{items.start_day}}</text>
											<text class="two"> ~ </text>
											<text class="three">{{items.end_day}}</text>
											<text class="four">(天)</text>
										</view>
										<view class="h-item-con-tag-list-day-r">
											<!-- <text v-if="items.standard == 1" class="reds">未达标</text>
											<text v-else class="greens">已达标</text> -->
											<image v-if="items.standard == 1" src="/static/db_no.png" class="imgs"
												mode=""></image>
											<image v-else src="/static/db_yes.png" class="imgs" mode=""></image>
										</view>
									</view>
									<view v-for="(itemd, indexd) in items.detail" :key="indexd"
										class="h-item-con-tag-list-con" :class="indexd == 0 ? 'border-bottom' : ''">
										<view class="days">
											<view class="one">{{itemd.title}}</view>
											<view class="three">{{itemd.sn}}</view>
										</view>
										<view class="progress">
											<text
												class="one reds">{{itemd.trade_money*100 > itemd.standard_money*100 ? Math.trunc(itemd.standard_money) : Math.trunc(itemd.trade_money)}}</text>
											<text class="two"> / </text>
											<text class="three greens">{{Math.trunc(itemd.standard_money)}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view v-if="downState" class="h-item-more border-top" @click="downClick">
							<u-icon name="arrow-up" color="#c8c9cc" size="28"></u-icon>
						</view>
					</view>
				</view>
				<u-empty v-else mode="list" icon="/static/Empty/data_null.png">
				</u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	var util = require('@/util/request.js');
	export default {
		data() {
			return {
				info: [],
				active: 1,
				myList: [],
				upState: true,
				downState: false,
			}
		},
		onLoad() {
			this.loadData()
			this.getMyActivity()
		},
		methods: {
			// 切换选项卡
			tags(active) {
				this.active = active
			},
			// 加载数据
			async loadData() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/getActivityList'
				});
				uni.hideLoading()
				if (res.code == 200) {
					res.data.forEach(item => {
						item.images = util.API_URL + item.images
						this.info.push(item)
					})
				}
			},
			// 获取我的活动
			async getMyActivity() {
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/getMyActivity'
				});
				if (res.code == 200) {
					res.data.forEach(item => {
						item.activitys.images = util.API_URL + item.activitys.images
						this.myList.push(item)
					})
				}
			},
			// 活动详情
			detail(item) {
				uni.navigateTo({
					url: '/pages/index/activity/detail?id=' + item.id
				})
			},
			// 向下展开
			upClick() {
				this.upState = false
				this.downState = true
			},
			// 向上收回
			downClick() {
				this.downState = false
				this.upState = true
			},
			// 政策配置
			policy(item) {
				uni.navigateTo({
					url: '/pages/index/activity/policy?id=' + item.id + '&name=' + item.title
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.menus {
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		padding: 16rpx 20rpx;

		.items {
			width: 50%;
			text-align: center;
			padding: 20rpx 0;
			font-weight: bold;
			font-size: 32rpx;
		}

		.active {
			border-radius: 10rpx;
			background-color: #2979ff;
			color: #ffffff;
		}
	}

	.main {
		padding: 30rpx;

		.lists {
			.items {
				background-color: #fff;
				padding: 30rpx;
				box-shadow: 0px 0px 20px -12px #342f2f;
				border-radius: 10rpx;
				position: relative;
				
				.policy {
					position: absolute;
					top: 0;
					right: 0;
					background-color: #342f2f;
					z-index: 99999;
					padding: 20rpx 30rpx;
					border-top-right-radius: 10rpx;
					font-size: 24rpx;
					color: #fff;
					opacity: .5;
				}

				.images {
					padding-bottom: 30rpx;
					border-bottom: 1px dashed #c8c9cc;
				}

				.specification {
					padding-top: 20rpx;
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;

					.nums {
						padding-left: 16rpx;
						font-size: 32rpx;
						color: #2979ff;
					}

					.price {
						font-size: 32rpx;
						color: #fa3534;
						padding: 0 16rpx;
					}
				}

				.title {
					padding-top: 20rpx;
				}
			}
		}

		.h-list {
			.h-item {
				background-color: #fff;
				padding: 20rpx 20rpx 0 20rpx;
				margin-bottom: 30rpx;
				border-radius: 10rpx;
				box-shadow: 0px 0px 20px -12px #342f2f;

				.h-item-top {
					display: flex;
					padding-bottom: 20rpx;
					border-bottom: 1px solid #c8c9cc;

					.h-item-top-left {
						width: 30%;
						margin-right: 20rpx;
					}

					.h-item-top-right {
						width: 70%;

						.h-item-top-right-title {
							font-size: 32rpx;
							font-weight: bold;
							padding: 20rpx 0;
						}

						.h-item-top-right-state {
							margin-top: 40rpx;
							font-size: 28rpx;
							display: flex;
							justify-content: space-between;
							font-weight: bold;
							align-items: center;

							.progress {
								.two {
									padding: 0 10rpx;
								}
							}
						}
					}
				}

				.h-item-more {
					padding: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.h-item-con {
					margin-top: 20rpx;

					.h-item-con-tag {
						margin-bottom: 30rpx;

						.h-item-con-tag-title {
							border-left: 5px solid #2979ff;
							padding-left: 10rpx;
							padding: 20rpx;
							background-color: #f4f4f5;

							.product {
								font-weight: bold;
							}

							.sn {
								font-size: 28rpx;
								padding-left: 20rpx;
							}
						}

						.h-item-con-tag-list {
							margin: 20rpx 0;
							border: 1px solid #F2F2F2;
							border-radius: 10rpx;
							padding: 20rpx;
							position: relative;

							.h-item-con-tag-list-day {
								font-weight: bold;
								padding-bottom: 20rpx;
								border-bottom: 1px dashed #F2F2F2;
								display: flex;
								justify-content: space-between;
								color: #2979ff;

								.two {
									color: #342f2f;
								}

								.four {
									color: #c8c9cc;
									font-size: 24rpx;
									padding-left: 10rpx;
								}
							}

							.h-item-con-tag-list-con {
								padding-top: 20rpx;
								display: flex;
								justify-content: space-between;
								font-size: 24rpx;
								align-items: center;
								
								.days {
									.three {
										padding-top: 10rpx;
										color: #C0C4CC;
									}
								}
							}

							.border-bottom {
								padding-bottom: 20rpx;
								border-bottom: 1px dashed #F2F2F2;
							}

							.days {
								width: 60%;
							}

							.progress {
								width: 32%;
								text-align: right;
							}

							.state {
								width: 8%;
								display: flex;
								justify-content: flex-end;
							}

							.two {
								color: #c8c9cc;
							}

							.imgs {
								width: 54px;
								height: 50px;
								position: absolute;
								top: 5px;
								right: 5px;
							}
						}
					}
				}

				.border-top {
					border-top: 1px solid #f4f4f5;
				}
			}
		}
	}

	.reds {
		color: #fa3534;
	}

	.greens {
		color: #19be6b;
	}
</style>